<template>
	<div class="login">
<!-- 		<div class="loginBox">
			<image :src="imageName('/loginImage.jpg')" style="width:100%;height:100%;" mode="scaleToFill"></image>
		</div> -->
		<div class="buttonBox" @click="toLogin">
			<image :src="imageName('/loginButton.png')" style="width:602rpx;" mode="widthFix"></image>
		</div>
		<customPopup ref="customPopupRef" @popupType="loginSet"></customPopup>
	</div>
</template>

<script>
	import imageName from '@/utils/imageFormat.js';
	export default {
		data() {
			return {
				showPrivacy:false,
				imageName,
				form: {
					mobile:'',
				}
			};
		},
		onLoad(){
		},
		methods:{
			toLogin(){
				this.$refs.customPopupRef.open()
			},
			loginSet(){
				uni.navigateTo({
					url: `/pages/index/index`,
				})
		    },

		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		background-image: url("https://edu.hailun-music.com/static/weidian/loginImage.jpg");
		background-size: 100% 100%;
		background-color: rgba(205,224,243, 1);
		// .loginBox{
		// 	width: 100%;
		// 	height: 100%;
		// }
		.buttonBox{
			width:602rpx;
			position: absolute;
			top:952rpx;
			left:74rpx;
		}
		// background: linear-gradient(to bottom,rgb(202,232,247),#F7F7F7 );
		// .header {
		// 	flex: 1;
		// 	width: 100%;
		// 	line-height: 66rpx;
		// 	font-size: 44rpx;
		// 	color: #333333;
		// 	font-weight: bold;
		// 	padding: 60rpx 60rpx;
		// 	box-sizing: border-box;
		// 	display: flex;
		// 	flex-direction: column;
			
		// }

		// .container {
		// 	flex: 2;
		// 	width: 100%;
		// 	padding: 0 60rpx;
		// 	box-sizing: border-box;
		// 	display: flex;
		// 	flex-direction: column;
		// 	justify-content: center;
		// 	align-items: center;

		// 	.input-box {
		// 		width: 100%;
		// 		padding: 24rpx 0;
		// 		box-sizing: border-box;
		// 		margin-bottom: 10rpx;
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
		// 		border-radius:10rpx;
				
		// 		text {
		// 			font-size: 28rpx;
		// 			margin-right: 5rpx;
		// 		}

		// 		input {
		// 			/*去除阴影*/
		// 			box-shadow: none;
		// 			/*去除边框*/
		// 			border: none;
		// 			/*去除聚焦input的蓝色边框*/
		// 			outline: none;
		// 			/*禁止拖拽*/
		// 			resize: none;
		// 			/*去除点击时背景高亮样式*/
		// 			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		// 			width: 0;
		// 			flex: 1;
		// 			background: transparent;
		// 			color: #000000;
		// 			border-bottom: 1px solid #c1c1c1;
		// 			font-size: 15px;
		// 			padding: 10rpx 0;
		// 			&::placeholder {
		// 				color: #333333;
		// 				letter-spacing: 0;
		// 				font-size: 24rpx;
		// 			}
		// 		}
		// 	}
		// 	.submit{
		// 		width: 100%;
		// 		height: 80rpx;
		// 		background-color: #5b96ff;
		// 		color: #ffffff;
		// 		font-size: 28rpx;
		// 		display: flex;
		// 		justify-content: center;
		// 		align-items: center;
		// 		margin-top: 80rpx;
		// 		border-radius: 20rpx;
		// 	}
		// }
	}
</style>